﻿<template>
    <div class="hidden h100 flex-column">
        <component is="style" />
        <el-tabs type="border-card" v-model="query.tab">
            <el-tab-pane :label="item.text" :name="item.id" v-for="item in urlList"></el-tab-pane>
        </el-tabs>
        <div class="padding-top-6 padding-left-10 text-right flex-row" v-if="urlList.length>0">
            <el-switch v-model="isAdd" :disabled="!optor.bucketName"></el-switch>
            <el-button icon="el-icon-refresh" circle class="margin-left-10" v-on:click="loadList"></el-button>
            <el-button icon="el-icon-plus" :disabled="!optor.bucketName" type="primary" circle class="margin-left-10" v-on:click="drawer=true"></el-button>
            <el-pagination background class="flex-row-fill" v-on:size-change="pagerSizeChange" v-on:current-change="pagerIndexChange" :current-page="query.pageIndex" :page-size="query.pageSize" layout="prev, pager, next, total, jumper, sizes" :total="query.rowCount" :small="true"></el-pagination>
        </div>
        <div class="flex-column-fill">
            @*<el-carousel indicator-position="none" :autoplay="false" height="36rem">
                    <el-carousel-item v-for="(video, index) in imglist" :key="index" class="text-center">
                        <video controls :src="video.miUrl" height="100%" width="80%" v-on:play="playMedia($event)" webkit-playsinline playsinline x5-video-player-type="h5"></video>
                    </el-carousel-item>
                </el-carousel>*@
            <div class="flex-row" style="flex-wrap:wrap;">
                <div v-for="(item,index) in imglist" class="flex-column">
                    <video controls style="width: 9rem; height: 16rem " :src="item.miUrl" class="margin-left-10 margin-top-10" v-on:play="playMedia($event)" webkit-playsinline x5-video-player-type="h5" >
                    </video>
                    <el-button size="mini" type="danger" icon="el-icon-delete" plain v-on:click="imgDel(item,index)" class="margin-left-10">删除</el-button>
                </div>
                
            </div>
        </div>
        <el-drawer custom-class="el-drawer-fix" :visible="drawer" size="800px" title="手动添加" :destroy-on-close="true" :close-on-press-escape="false" :wrapper-closable="false">
            <div class="flex-column hidden" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                <div class="flex-column-fill hidden-x" style="padding-bottom:50px;">
                    <js-media :value="mediaList" empty-text="请点击下方按钮添加视频" :fn="{audio:false,video:true,file:false,share:false,text:false,image:false}"></js-media>
                </div>
                <div class="padding-10 border-top-solid border-greyLight">
                    <el-button-group size="small">
                        <el-button type="info" plain v-on:click="drawer=false" icon="fa fa-rotate-left" size="small">取 消</el-button>
                        <el-button type="primary" icon="fa fa-check" size="small" v-on:click="submit">保 存</el-button>
                    </el-button-group>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'video',
            props: {

            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    query: { tab: 0 },
                    urlList: [],
                    isAdd: false,
                    list: [],
                    imglist: [],
                    imglistpreview: [],
                    drawer: false,
                    mediaList: [],
                    obj: null,
                    query: {
                        tab:15,
                        pageIndex: 1,
                        pageSize: 10,
                        rowCount: 0

                    }
                }
            },
            computed: {

            },
            watch: {
                'query.tab': function (val) {
                    var _this = this;
                    if (!parseInt(val)) return;
                    _this.loadList();
                    _this.loadImg();
                },
            },
            activated: function () {
            },
            mounted: function () {
                var _this = this;
                //_this.loadList();
                //_this.loadImg();
                _this.loadTitle();
            },
            methods: {
                loadTitle: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/mediaInfoTitle',
                        data: { type: 4},
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('获取媒体组失败：' + res.errmsg);
                            _this.urlList = res.data;
                            var obj = res.data.find(function (item) { return item.isMain == 1 });
                            if (obj) {
                                _this.query.tab = obj.id;
                                _this.loadImg();
                            };
                        }
                    });
                },
                urlToBase64: function (url) {
                    return fetch(url)
                        .then(function (response) {
                            // 检查响应是否成功 (状态码在200-299之间)
                            if (!response.ok) {
                                throw new Error('Network response was not ok.');
                            }
                            // 解析响应内容为文本
                            return response.arrayBuffer();
                        })
                        .then(function (arrayBuffer) {
                            // 在这里，data变量包含文件的内容
                            const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
                            return `data:video/mp4;base64,${base64}`;
                        })
                        .catch(function (error) {
                            // 如果在请求过程中发生错误，catch块会捕获它
                            console.error('There has been a problem with your fetch operation:', error);
                        });
                },
                imgDel: function (d, index) {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/_ossDel',
                        data: { miId: d.miId, url: d.miUrl },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('删除失败：' + res.errmsg);
                            hxt.success('删除成功');
                            _this.imglist.splice(index, 1);
                        }
                    });
                },
                loadList: function () {
                    var _this = this,
                        obj = _this.urlList.find(function (item) { return item.id == _this.query.tab });
                    _this.obj = obj;
                    _this.loadImg();
                    if (!_this.isAdd) return;
                    _this.list = [];
                    if (_this.query.tab == 6) {
                        $.ajax({
                            url: obj.url,
                            type: "GET",
                            success: function (res1) {
                                console.log(res1.video)
                                _this.list = [res1.video];
                                //_this.urlToBase64(res1.video).then(function (base64){
                                //    console.log(base64); // 输出转换后的Base64编码字符串
                                //});
                                hxt.post({
                                    url: hxt.config.link + 'pc/GetUrlToBase64',
                                    data: { url: res1.video },
                                    ok: function (res2) {
                                        if (res2.code != 0) return hxt.error('提交失败：' + res2.errmsg);
                                        //return
                                        hxt.uploadFile({
                                            signUrl: hxt.config.link + 'pc/v3OssToken',
                                            base64: res2.data,
                                            file: null,
                                            compress: false,
                                            folder: _this.optor.bucketName + '/video' + (_this.obj.id == 6 ? '/sj' : _this.obj.id == 7 ? '/msn' : _this.obj.id == 8 ? '/ym' : _this.obj.id == 13 ? '/xjj' : _this.obj.id == 15 ? '/my' : _this.obj.id == 16 ? '/cos' : _this.obj.id == 18 ? '/xjj2' : '/upload') + '/',
                                            success: function (res) {
                                                var mediaList = [{ miType: 4, miUrl: res.url, miBase64: res.raw64, miImgUrl: res1.video, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url }];
                                                hxt.post({
                                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                                    ok: function (res) {
                                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                                        _this.loadImg();
                                                    }
                                                });
                                            },
                                            fail: function (err) {
                                                hxt.unmask();
                                                hxt.error('附件上传失败：' + err);
                                            }
                                        });
                                    }
                                });

                            }
                        });
                    };
                    if (_this.query.tab == 7) {
                        for (var i = 0; i < 10; i++) {
                            $.ajax({
                                url: obj.url,
                                type: "GET",
                                success: function (res1) {
                                    console.log(res1)
                                    _this.list = [res1];
                                    var mediaList = [{ miType: 4, miUrl: res1.data, miBase64: '', miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url }];
                                    hxt.post({
                                        url: hxt.config.link + 'pc/mediaInfoSave',
                                        data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                        ok: function (res) {
                                            if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                            _this.loadImg();
                                        }
                                    });
                                    return
                                    hxt.post({
                                        url: hxt.config.link + 'pc/GetUrlToBase64',
                                        data: { url: res1 },
                                        ok: function (res2) {
                                            if (res2.code != 0) return hxt.error('提交失败：' + res2.errmsg);
                                            //return
                                            hxt.uploadFile({
                                                signUrl: hxt.config.link + 'pc/v3OssToken',
                                                base64: res2.data,
                                                file: null,
                                                compress: false,
                                                folder: _this.optor.bucketName + '/video' + (_this.obj.id == 6 ? '/sj' : _this.obj.id == 7 ? '/msn' : _this.obj.id == 8 ? '/ym' : _this.obj.id == 13 ? '/xjj' : _this.obj.id == 15 ? '/my' : _this.obj.id == 16 ? '/cos' : _this.obj.id == 18 ? '/xjj2' : '/upload') + '/',
                                                success: function (res) {
                                                    var mediaList = [{ miType: 4, miUrl: res.url, miBase64: res.raw64, miImgUrl: res1, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url }];
                                                    hxt.post({
                                                        url: hxt.config.link + 'pc/mediaInfoSave',
                                                        data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                                        ok: function (res) {
                                                            if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                                            _this.loadImg();
                                                        }
                                                    });
                                                },
                                                fail: function (err) {
                                                    hxt.unmask();
                                                    hxt.error('附件上传失败：' + err);
                                                }
                                            });
                                        }
                                    });

                                }
                            });
                        };
                    };
                    if (_this.query.tab == 4) {
                        $.ajax({
                            url: obj.url,
                            type: "GET",
                            success: function (res1) {
                                console.log(res1.imgurl)
                                _this.list = [res1.imgurl];
                                hxt.post({
                                    url: hxt.config.link + 'pc/GetUrlToBase64',
                                    data: { url: res1.imgurl },
                                    ok: function (res2) {
                                        console.log(res2)
                                        if (res2.code != 0) return hxt.error('失败：' + res2.errmsg);
                                        //return
                                        hxt.uploadFile({
                                            signUrl: hxt.config.link + 'pc/v3OssToken',
                                            base64: 'data:image/jpeg;base64,' + res2.data,
                                            file: null,
                                            compress: false,
                                            folder: _this.optor.bucketName + '/video' + (_this.obj.id == 6 ? '/sj' : _this.obj.id == 7 ? '/msn' : _this.obj.id == 8 ? '/ym' : _this.obj.id == 13 ? '/xjj' : _this.obj.id == 15 ? '/my' : _this.obj.id == 16 ? '/cos' : _this.obj.id == 18 ? '/xjj2' : '/upload') + '/',
                                            success: function (res) {
                                                var mediaList = [{ miType: 2, miUrl: res.url, miBase64: res.raw64, miImgUrl: res1.imgurl, miTitle: '【' + obj.text + '】-' + obj.p, miDesc: obj.url }];
                                                hxt.post({
                                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                                    ok: function (res) {
                                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);

                                                    }
                                                });
                                            },
                                            fail: function (err) {
                                                hxt.unmask();
                                                hxt.error('附件上传失败：' + err);
                                            }
                                        });


                                    }
                                });

                            }
                        });
                    };
                    if (_this.query.tab == 8) {
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', obj.url, true);
                        xhr.responseType = "text";
                        xhr.onload = function () {
                            console.log(1, xhr);
                            return;
                            if (xhr.status === 200) {
                                hxt.post({
                                    url: hxt.config.link + 'pc/GetUrlToBase64',
                                    data: { url: xhr.responseText },
                                    ok: function (res2) {
                                        if (res2.code != 0) return hxt.error('提交失败：' + res2.errmsg);
                                        hxt.uploadFile({
                                            signUrl: hxt.config.link + 'pc/v3OssToken',
                                            base64: res2.data,
                                            file: null,
                                            compress: false,
                                            folder: _this.optor.bucketName + '/video' + (_this.obj.id == 6 ? '/sj' : _this.obj.id == 7 ? '/msn' : _this.obj.id == 8 ? '/ym' : _this.obj.id == 13 ? '/xjj' : _this.obj.id == 15 ? '/my' : _this.obj.id == 16 ? '/cos' : _this.obj.id == 18 ? '/xjj2' : '/upload') + '/',
                                            success: function (res) {
                                                var mediaList = [{ miType: 4, miUrl: res.url, miBase64: res.raw64, miImgUrl: xhr.responseText, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: obj.url }];
                                                hxt.post({
                                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                                    ok: function (res) {
                                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                                        _this.loadImg();
                                                    }
                                                });
                                            },
                                            fail: function (err) {
                                                hxt.unmask();
                                                hxt.error('附件上传失败：' + err);
                                            }
                                        });
                                    }
                                });
                            }
                            else {
                                hxt.error('下载失败：{0}（{1}）'.formatStr(xhr.status, xhr.statusText));
                            }
                        };
                        xhr.onerror = function (e) {
                            hxt.error('下载失败：Network request failed');
                        };
                        xhr.onloadstart = function () {
                            hxt.mask();
                        };
                        xhr.onloadend = function () {
                            hxt.unmask();
                        };
                        xhr.send(null);
                        return
                        $.ajax({
                            url: obj.url,
                            type: "GET",
                            success: function (res1) {
                                console.log(res1)

                            }
                        });
                    }
                    if (_this.query.tab == 13) {
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', obj.url, true);
                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                var res = JSON.parse(xhr.responseText);
                                console.log(res)
                                var mediaList = [{ miType: 4, miUrl: res.video, miBase64: '', miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: '' }];
                                hxt.post({
                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                    ok: function (res) {
                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                        _this.loadImg();
                                    }
                                });
                            }
                            else {
                                hxt.error('下载失败：{0}（{1}）'.formatStr(xhr.status, xhr.statusText));
                            }
                        };
                        xhr.onerror = function (e) {
                            hxt.error('下载失败：Network request failed');
                        };
                        xhr.onloadstart = function () {
                            hxt.mask();
                        };
                        xhr.onloadend = function () {
                            hxt.unmask();
                        };
                        xhr.send(null);
                        return
                        $.ajax({
                            url: obj.url,
                            type: "GET",
                            success: function (res1) {
                                console.log(res1)

                            }
                        });
                    }
                    if (_this.query.tab == 15) {
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', obj.url, true);
                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                var res = JSON.parse(xhr.responseText);
                                console.log(res)
                                var mediaList = [{ miType: 4, miUrl: res.data, miBase64: '', miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: '' }];
                                hxt.post({
                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                    ok: function (res) {
                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                        _this.loadImg();
                                    }
                                });
                            }
                            else {
                                hxt.error('下载失败：{0}（{1}）'.formatStr(xhr.status, xhr.statusText));
                            }
                        };
                        xhr.onerror = function (e) {
                            hxt.error('下载失败：Network request failed');
                        };
                        xhr.onloadstart = function () {
                            hxt.mask();
                        };
                        xhr.onloadend = function () {
                            hxt.unmask();
                        };
                        xhr.send(null);
                        return
                        $.ajax({
                            url: obj.url,
                            type: "GET",
                            success: function (res1) {
                                console.log(res1)

                            }
                        });
                    }
                    if (_this.query.tab == 16) {
                        $.ajax({
                            url: obj.url,
                            type: "GET",
                            success: function (res1) {
                            }
                        })
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', obj.url, true);
                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                var res = JSON.parse(xhr.responseText);
                                console.log(res)
                                return
                                var mediaList = [{ miType: 4, miUrl: res.data, miBase64: '', miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: '' }];
                                hxt.post({
                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                    ok: function (res) {
                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                        _this.loadImg();
                                    }
                                });
                            }
                            else {
                                hxt.error('下载失败：{0}（{1}）'.formatStr(xhr.status, xhr.statusText));
                            }
                        };
                        xhr.onerror = function (e) {
                            hxt.error('下载失败：Network request failed');
                        };
                        xhr.onloadstart = function () {
                            hxt.mask();
                        };
                        xhr.onloadend = function () {
                            hxt.unmask();
                        };
                        xhr.send(null);
                        return
                        $.ajax({
                            url: obj.url,
                            type: "GET",
                            success: function (res1) {
                                console.log(res1)

                            }
                        });
                    }
                    if (_this.query.tab == 18) {
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', obj.url, true);
                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                var res = JSON.parse(xhr.responseText);
                                console.log(res)
                                var mediaList = [{ miType: 4, miUrl: res.data, miBase64: '', miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: '' }];
                                //return;
                                //var mediaList = res.videos.map(function (item) {
                                //    return { miType: 4, miUrl: res.data, miBase64: '', miImgUrl: obj.url, miTitle: '【' + obj.text + '】-' + obj.title, miDesc: '' }
                                //});
                                hxt.post({
                                    url: hxt.config.link + 'pc/mediaInfoSave',
                                    data: { miGroupKey: obj.groupKey, mediaList: encodeURI(JSON.stringify(mediaList)) },
                                    ok: function (res) {
                                        if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                        _this.loadImg();
                                    }
                                });
                            }
                            else {
                                hxt.error('下载失败：{0}（{1}）'.formatStr(xhr.status, xhr.statusText));
                            }
                        };
                        xhr.onerror = function (e) {
                            hxt.error('下载失败：Network request failed');
                        };
                        xhr.onloadstart = function () {
                            hxt.mask();
                        };
                        xhr.onloadend = function () {
                            hxt.unmask();
                        };
                        xhr.send(null);
                    }
                },
                loadImg: function () {
                    var _this = this,
                        obj = _this.urlList.find(function (item) { return item.id == _this.query.tab });
                    hxt.post({
                        url: hxt.config.link + 'pc/mediaInfoList',
                        data: { miGroupKey: obj.groupKey, pageSize: _this.query.pageSize, pageIndex: _this.query.pageIndex },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载失败：' + res.errmsg);
                            _this.imglist = res.data.list;
                            _this.query.pageSize = res.data.pageSize;
                            _this.query.pageIndex = res.data.pageIndex;
                            _this.query.rowCount = res.data.rowCount;
                        }
                    });
                },
                pagerSizeChange: function (val) {
                    var _this = this;
                    _this.query.pageSize = val;
                    if (Math.ceil(_this.query.rowCount * 1.0000 / val) >= _this.query.pageIndex) _this.loadImg();
                },
                pagerIndexChange: function (val) {
                    var _this = this;
                    _this.query.pageIndex = val;
                    _this.loadImg();
                },


                playMedia: function (evt) {
                    var el = evt.currentTarget
                        , audios = $('audio')
                        , videos = $('video');

                    $.each(audios, function (idx, item) {
                        if (item !== el) {
                            item.pause();
                        }
                    });
                    $.each(videos, function (idx, item) {
                        if (item !== el) {
                            item.pause();
                        }
                    });
                },
                submit: function () {
                    var _this = this;
                    var saveToServer = function () {
                        hxt.unmask();
                        hxt.post({
                            url: hxt.config.link + 'pc/mediaInfoSave',
                            data: { miGroupKey: _this.obj.groupKey, mediaList: encodeURI(JSON.stringify(_this.mediaList)) },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);

                            }
                        });
                    };
                    var upload = function () {
                        var row = _this.mediaList.find(function (item) {
                            var url = ('' + item.miUrl).toLowerCase();
                            return item.miType != 1 && item.miType != 5 && !url.startsWith('http://') && !url.startsWith('https://');
                        });
                        if (!!row) {
                            hxt.uploadFile({
                                signUrl: hxt.config.link + 'pc/v3OssToken',
                                base64: row.miType == 2 ? row.miUrl : null,
                                file: row.miType != 2 ? row.miUrl : null,
                                compress: false,
                                folder: _this.optor.bucketName +  '/video' + (_this.obj.id == 6 ? '/sj' : _this.obj.id == 7 ? '/msn' : _this.obj.id == 8 ? '/ym' : _this.obj.id == 13 ? '/xjj' : _this.obj.id == 15 ? '/my' : _this.obj.id == 16 ? '/cos' : _this.obj.id == 18 ? '/xjj2' : '/upload') + '/',
                                success: function (res) {
                                    row.miUrl = res.url;
                                    upload();
                                },
                                fail: function (err) {
                                    hxt.unmask();
                                    hxt.error('附件上传失败：' + err);
                                }
                            });
                        }
                        else {
                            saveToServer();
                        }
                    };
                    hxt.mask();
                    upload();
                }
            },
            components: {
                jsMedia: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/pc/My/Component/pc.media.cshtml"))); },
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .el-tab-pane {
        height: 100%;
    }

    .el-tabs__content {
        flex: 1;
    }

    .el-tabs--border-card > .el-tabs__content {
        padding: 0px !important;
    }
</style>